<template>
  <Fieldset legend="Scale" :toggleable="true">
    <div class="flex flex-col gap-4 p-4 rounded-md border border-surface-200 dark:border-surface-700">
      <span class="text-muted-color">1rem 等于 html 元素的字体大小.</span>
      <SelectButton
        v-model="themeStore.Scale"
        :options="scaleOptions"
        optionLabel="label"
        optionValue="value"
        @update:modelValue="onScaleChange"
        :allowEmpty="false"
      />
    </div>
  </Fieldset>
</template>

<script lang="ts" setup>
  import { useThemeStore } from '@/stores/useThemeStore'

  const themeStore = useThemeStore()
  const scaleOptions = [
    { label: '12px', value: 12 },
    { label: '13px', value: 13 },
    { label: '14px', value: 14 },
    { label: '15px', value: 15 },
    { label: '16px', value: 16 },
    { label: '17px', value: 17 },
    { label: '18px', value: 18 },
    { label: '34px', value: 34 },
  ]

  const onScaleChange = (value: number) => {
    themeStore.setScale(value)
  }
</script>
